<%--
  Created by IntelliJ IDEA.
  User: maliangcheng
  Date: 2020/8/13
  Time: 19:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="head.jsp"%>
<html>
<head>
    <title>main</title>
    <link rel="stylesheet" href="/resource/layui/css/layui.css" media="all">
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;">

    <div class="layui-row layui-col-space15" id="vue">
        <div class="layui-col-md6" >
            <div class="layui-card">
                <div class="layui-icon-align,layui-card-header" style="margin-left: 170px">
                    <i class="layui-icon layui-icon-app" style="font-size:50px;margin-left: 30px"></i>
                    订单总数
                </div>
                <div class="layui-card-body" style="height: 100px">
                    <div class="layui-col-md4" style="color: brown;font-size: 30px;margin-left: 250px;margin-top: 30px">{{info.orderCount}}</div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-icon-align,layui-card-header"style="margin-left: 170px">
                    <i class="layui-icon layui-icon-rmb" style="font-size:50px;margin-left: 30px"></i>
                    总销售金额
                </div>
                <div class="layui-card-body" style="height: 100px">
                    <div class="layui-col-md4" style="color: brown;font-size: 30px;margin-left: 250px;margin-top: 30px">{{info.totalPrice}}</div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card" style="height: 200px">
                <div class="layui-card-header">标题</div>
                <div class="layui-card-body">内容
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card" style="height: 200px;">
                <div class="layui-card-header" style="background-color: #f2f6fc">商品总览</div>
                <div class="layui-card-body" style="margin-top: 30px">
                    <div class="layui-row" style="margin-left: 70px">
                        <div class="layui-col-md3" style="color: brown;font-size: 30px">0</div>
                        <div class="layui-col-md3" style="color: brown;font-size: 30px">{{info2.goodsCount}}</div>
                        <div class="layui-col-md3" style="color: brown;font-size: 30px">{{info2.goodsTight}}</div>
                        <div class="layui-col-md3" style="color: brown;font-size: 30px">{{info2.goodsCount}}</div>
                    </div>
                    <div class="layui-row" style="margin-left: 65px;margin-top: 20px">
                        <div class="layui-col-md3">已下架</div>
                        <div class="layui-col-md3">已上架</div>
                        <div class="layui-col-md3">库存紧张</div>
                        <div class="layui-col-md3">全部商品</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card" style="height: 200px;">
                <div class="layui-card-header" style="background-color: #f2f6fc">用户总览</div>
                <div class="layui-card-body" style="margin-top: 30px">
                    <div class="layui-row" style="margin-left: 70px">
                        <div class="layui-col-md4" style="color: brown;font-size: 30px">0</div>
                        <div class="layui-col-md4" style="color: brown;font-size: 30px">{{info3.customerTight}}</div>
                        <div class="layui-col-md4" style="color: brown;font-size: 30px">{{info3.customerTight}}</div>
                    </div>
                    <div class="layui-row" style="margin-left: 65px;margin-top: 20px">
                        <div class="layui-col-md4">今日新增</div>
                        <div class="layui-col-md4">本月新增</div>
                        <div class="layui-col-md4">总客户</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/resource/layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="../js/main2.js"></script>
<script>
    var vm = new Vue({
        el: "#vue",
        data(){
            return{
                //json对应main页面元素
                info:{
                    orderCount: null,
                    totalPrice: null,

                },
                info2: {
                    goodsCount: null,
                    goodsTight: null

                },
                info3: {
                    customerTight: null
                }
            }
        },
        mounted(){
            axios.post('http://localhost:8080/order/Count').then(response=>(this.info = response.data)),
                axios.get('http://localhost:8080/goods/Count').then(response=>(this.info2 = response.data)),
                axios.get('http://localhost:8080/customer/count').then(response=>(this.info3 = response.data))
        }
    })
</script>
<%--<script>--%>
<%--    layui.use(['element', 'layer'], function(){--%>
<%--        var element = layui.element;--%>
<%--        var layer = layui.layer;--%>


<%--        //监听折叠--%>
<%--        element.on('collapse(test)', function(data){--%>
<%--            layer.msg('展开状态：'+ data.show);--%>
<%--        });--%>
<%--    });--%>
<%--</script>--%>
</body>
</html>
